<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统布局的三种方式</title>
    <link rel="stylesheet" href="../css/test22.css">
</head>

<body>
    <!-- 三种布局  普通流/浮动/定位 -->
    <!-- 注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。 -->

    <!-- 所谓的标准流: 就是标签按照规定好默认方式排列  标准流是最基本的布局方式
    块级元素会独占一行，从上向下顺序排列。
    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
    常用元素：span、a、i、em 等
     -->
    <!-- 
    浮动
    有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 
    因为浮动可以改变元素标签默认的排列方式.
    浮动最典型的应用：可以让多个块级元素一行内排列显示。
    网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 
-->

    <!-- float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 -->
    <!-- 浮动的元素会一行内显示并且元素顶部对齐 -->

    <!-- 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，
    多出的盒子会另起一行对齐。
    3、浮动的元素会具有行内块元素的特性
    浮动元素的大小根据内容来决定
    浮动的盒子中间是没有缝隙的 -->
    <!-- <div class="box1">
        <div class="box2"></div>

    </div> -->

    <!-- 父盒子容易出现高度坍塌，给父盒子解决高度坍塌就好 -->
    <!-- 解决高度坍塌 -->
    <!-- .box::before,
    .box::after{
    content: '';
    display: table;
    clear: both;
    } -->

    <!-- 浮动元素经常和标准流父级搭配使用
    为了约束浮动元素位置, 我们网页布局一般采取的策略是:
    先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 
    符合网页布局第一准侧 -->
    <div class="box">
        <div class="son son1">浮动子盒子</div>
        <div class="son son2">浮动子盒子</div>
        <div class="son son3">浮动子盒子</div>
    </div>

    <!-- 浮动布局注意点
    1、浮动和标准流的父盒子搭配。

    先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

    2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

    一个盒子里面有多个子盒子，如果其中一个盒子浮动了，
    其他兄弟也应该浮动，以防止引起问题。

    浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流. -->

    <!-- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，
    最后父级盒子高度为 0 时，就会影响下面的标准流盒子。 -->

    <!-- 清除浮动本质
    清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
    注意：
    如果父盒子本身有高度，则不需要清除浮动
    清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
    父级有了高度，就不会影响下面的标准流了 -->

    <!-- 清除浮动的样式
    语法：
    选择器 {clear: 属性值}
    left     不允许左侧右浮动的元素（清除左侧浮动的影响）
    right    不允许右侧有浮动的元素（清除右侧浮动的影响）
    both     同时清除左右两侧浮动的影响

    实际工作中  几乎只用cler:both
    清除浮动的策略是闭合浮动 -->

    <!-- 1.
        清除浮动：额外标签法（隔墙法）
        额外标签会在浮动元素的末尾添加一个空的标签
        优点： 通俗易懂，书写方便
        缺点： 添加许多无意义的标签，结构化较差
        注意： 要求这个新的空标签必须是块级元素。

     -->

     <!-- 总结：
     1.清除浮动的本质是：清除浮动元素脱离标准流造成的影响
     2.清除浮动的策略就是闭合浮动，只让浮动在负盒子的内部影响
     不影响外面的盒子
     3.额外标签法：就是在浮动元素的后面添加一个额外的标签，添加
     清除浮动的样式，实际开发中可能会遇到，但是不常用 -->

     <!-- 
        可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
        优点：代码简洁
        缺点：无法显示溢出的部分
        注意：是给父元素添加代码
      -->

      <!-- 
        给父元素添加双伪元素
        :before,:after{
            display:table;
            clear:both;
            content:'';
        }
        优点：代码更加简洁
        缺点：照顾低版本的浏览器
       -->
     

       <!-- 
        为什么要清除浮动？
        1.父盒子没有高度
        2.子盒子浮动了
        3.影响下面布局

        清除浮动的方式；
        1.额外标签法
        2.父级添加overflow:hidden;
        3.父级添加after伪元素
        4.父级添加双伪元素
        -->

</body>

</html>